<template>
    <div id="main" :style="{width: '600px', height: '600px'}"></div>
</template>

<script>
    import http from "../utils/req";
    import *as echarts from 'echarts';
    export default {
        name: "logDrawPie",
        data() {
            return {
                chartData: [

                ],
            }
        },
        mounted() {
            this.drawLog();
        },
        methods: {
            drawLog() {
                http.get('/dLog', {
                    data:
                        {id: 1, name: 'zhangsan'}
                })
                    .then(response => {
                        console.log(response.data);
                        this.opinionData = response.data;
                        this.chartData = response.data;
                        console.log(this.chartData);
                        this.drawLine('main')
                    }, response => {
                        console.log("error");
                    });
            },
            drawLine(id) {
                for (let i =0;i< 4;++i){
                    if (!this.chartData[i]){
                        this.chartData[i] = {state: i+1}
                    }
                }
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '日志操作类型统计饼图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: (this.chartData[0]?this.chartData[0].num:0), name: '增'},
                                {value: (this.chartData[1]?this.chartData[1].num:0), name: '删'},
                                {value: (this.chartData[2]?this.chartData[2].num:0), name: '改' },
                                {value: (this.chartData[3]?this.chartData[3].num:0), name: '查'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            }
        }
    }
</script>

<style scoped>

</style>
